<template>
    <div class="rename-group">
        <el-dialog
            title="重命名"
            :visible.sync="dialogVisible"
            width="30%"
            append-to-body
            :before-close="handleClose">
            <el-form :rules="rules" :model="form" ref="form">
                <el-form-item prop="name">
                    <el-input v-model="form.name" size="mini">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateName">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'RenameGroup',
        data () {
            let count = 0
            let nameValidator = (rule, value, callback) => {
                this.itemList.forEach(item => {
                    if (item.name === value) {
                        count++
                    }
                })
                if (count > 2) {
                    debugger
                    callback(new Error('不可与同一分组内的同一层级分组重名'))
                } else {
                    callback()
                }
            }
            return {
                dialogVisible: false,
                form: {
                    name: ''
                },
                item: null,
                itemList: [],
                rules: {
                    name: [
                        {required: true, message: '此项为必输项', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            openDialog (itemList, item) {
                this.dialogVisible = true
                this.item = item
                this.itemList = itemList
                this.form.name = item.name
                this.$nextTick(() => {
                    this.$refs.addEditForm.clearValidate()
                })
            },
            handleClose () {
                this.dialogVisible = false
            },
            updateName () {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.dialogVisible = false
                        let param = {
                            newName: this.form.name,
                            item: this.item
                        }
                        this.$emit('saveName', param)
                        this.form.name = ''
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
